
<table id="peptidesList">
  <thead>
    <tr>
      <th style="border-bottom: none;">Protein</th>
      <th style="border-bottom: none;">Gene name</th>
      <th style="border-bottom: none;">Peptide sequence</th>
      <th style="border-bottom: none;">Project</th>
      <th style="border-bottom: none;">Peptide Mass</th>
      <th style="border-bottom: none;">Molecular weight of intact protein</th>
      <th style="border-bottom: none;">Category</th>
      <th style="border-bottom: none;">Biological sample</th>
      <th style="border-bottom: none;">Start - End</th>
      <th style="border-bottom: none;"># of references [#]</th>
    </tr>
    <tr>
      <td><input style="text-align: center;" type="text" name="search_protein" value="filter" class="search_init" /></td>
      <td><input style="text-align: center;" type="text" name="search_gene_name" value="filter" class="search_init" /></td>
      <td><input style="text-align: center;" type="text" name="search_peptide_sequence" value="filter" class="search_init" /></td>
      <td><input style="text-align: center;" type="text" name="search_project" value="filter" class="search_init" /></td>
      <td><input style="text-align: center;" type="text" name="search_peptide_mass" value="filter" class="search_init" /></td>
      <td><input style="text-align: center;" type="text" name="search_molecular_weight" value="filter" class="search_init" /></td>
      <td><input style="text-align: center;" type="text" name="search_category" value="filter" class="search_init" /></td>
      <td><input style="text-align: center;" type="text" name="search_biological_sample" value="filter" class="search_init" /></td>
      <td><input style="text-align: center;" type="text" name="search_start" value="filter" class="search_init" /></td>
            <td><input style="text-align: center;" type="text" name="search_publication" value="filter" class="search_init" />
    </tr>
  </thead>
  <tbody>
    <g:each in="${result}" var="row">
      <tr>
        <th class="left">${row.mainId}</th>
        <th class="left">${row.name}</th>
        <th style="text-align: left;">${row.peptideSeq}</th>
        <th style="text-align: center;">${row.project}</th>
        <th class="right">${row.calculatedPeptideMass}</th>
        <th class="right">${row.molecularWeight}</th>
        <th>${row.sampleCategory}</th>
        <th>${row.biologicalSampleName}</th>
        <th>${row.peptideStartIndex} - ${row.peptideStopIndex}</th>
         <th><g:remoteLink action="literature" id="${row.proteinId}" update="literature">${row.cc} </g:remoteLink><g:link action="literature" id="${row.proteinId}" target="_blank"></g:link></th>
    </tr>
    </g:each>
  </tbody>
</table>
<script type="text/javascript">
  $(document).ready(function() {
    var oTable;

    /* Add the events etc before DataTables hides a column */
    $("thead input").keyup( function () {
        /* Filter on the column (the index) of this element */
        oTable.fnFilter( this.value, oTable.oApi._fnVisibleToColumnIndex(
                oTable.fnSettings(), $("thead input").index(this) ) );
    } );

    /*
    * Support functions to provide a little bit of 'user friendlyness' to the textboxes
    */
    $("thead input").each( function (i) {
        this.initVal = this.value;
    } );

    $("thead input").focus( function () {
        if ( this.className == "search_init" )
        {
                this.className = "";
                this.value = "";
        }
    } );

    $("thead input").blur( function (i) {
        if ( this.value == "" )
        {
                this.className = "search_init";
                this.value = this.initVal;
        }
    } );

    oTable = $('#peptidesList').dataTable( {
        "sDom": 'RC<"clear">lfrtip',
        "bInfo": false,
        "bPaginate": false,
        "bSortCellsTop": true,
        "sScrollY": "580"
    } );
  } );
</script>